<template>
  <!-- 绑定仓库 -->
  <el-dialog
    :center="true"
    :visible.sync="visible"
    width="80%"
    @close="cancel"
  >
    <div v-loading="loadingdialog">
      <div class="header_title_box">
        <h2>待绑定仓库</h2>
      </div>
      <div class="filter-container">
        <el-input
          v-model="name"
          placeholder="仓库名称"
          class="input-with-select mr64"
          @keyup.enter.native="query"
        />
        <el-button
          type="primary"
          @click="query"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          @click="refresh"
        >刷新</el-button>
      </div>
      <div style="height: 250px; overflow: auto;">
        <el-table
          ref="bindWarehouseTable"
          v-loading="tableLoading"
          :data="warehouseListData"
          tooltip-effect="dark"
          style="width: 100%"
          height="250"
          border
        >
          <el-table-column
            label="操作"
            align="center"
            fixed
            width="90px"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.isDisable"
                class="edit_style"
                @click="handlebind(scope.row)"
              >绑定</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓库名称"
            prop="name"
          />
          <el-table-column
            align="center"
            label="客户仓库"
            prop="company_id"
          >
            <template slot-scope="scope">
              {{ scope.row.company_id===0?'否':'是' }}
            </template>
          </el-table-column>
          <!-- is_third_part -->
          <el-table-column
            align="center"
            label="第三方仓库"
            prop="is_third_part"
          >
            <template slot-scope="scope">
              {{ scope.row.is_third_part===0?'否':'是' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓库代码"
            prop="code"
          />
          <el-table-column
            align="center"
            label="仓库类型"
            prop="type_text"
          />
          <el-table-column
            align="center"
            label="上级仓库"
            prop="parent_warehouse"
          />
          <el-table-column
            align="center"
            label="仓库地址"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.state }}/{{ scope.row.city }}/{{ scope.row.street }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓库邮编"
            prop="zipcode"
          />
          <el-table-column
            align="center"
            label="状态"
            prop="is_active_text"
          />
          <el-table-column
            align="center"
            label="创建人"
            prop="created_by_name"
          />
          <el-table-column
            align="center"
            label="创建时间"
            prop="created_at"
            width="150px"
          />
          <el-table-column
            align="center"
            label="修改人"
            prop="updated_by_name"
          />
          <el-table-column
            align="center"
            label="修改时间"
            prop="updated_at"
            width="150px"
          />
        </el-table>
      </div>
      <div class="header_title_box mt25">
        <h2>已绑定仓库</h2>
      </div>
      <div
        class="mb25"
        style="height: 250px; overflow: auto;"
      >
        <el-table
          ref="unbindWarehouseTable"
          :data="unwarehouseListData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          height="250"
        >
          <el-table-column
            label="操作"
            align="center"
            fixed
            width="90px"
          >
            <template slot-scope="scope">
              <span
                class="edit_style"
                @click="handleDel(scope.row)"
              >移除</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓库名称"
            prop="name"
          />
          <el-table-column
            align="center"
            label="仓库代码"
            prop="code"
          />
          <el-table-column
            align="center"
            label="客户仓库"
            prop="company_id"
          >
            <template slot-scope="scope">
              {{ scope.row.company_id===0?'否':'是' }}
            </template>
          </el-table-column>
          <!-- is_third_part -->
          <el-table-column
            align="center"
            label="第三方仓库"
            prop="is_third_part"
          >
            <template slot-scope="scope">
              {{ scope.row.is_third_part===0?'否':'是' }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓库类型"
            prop="type_text"
          />
          <el-table-column
            align="center"
            label="上级仓库"
            prop="parent_warehouse"
          />
          <el-table-column
            align="center"
            label="仓库地址"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.state }}/{{ scope.row.city }}/{{ scope.row.street }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="仓库邮编"
            prop="zipcode"
          />
          <el-table-column
            align="center"
            label="状态"
            prop="is_active_text"
          />
          <el-table-column
            align="center"
            label="创建人"
            prop="created_by_name"
          />
          <el-table-column
            align="center"
            label="创建时间"
            prop="created_at"
            width="150px"
          />
          <el-table-column
            align="center"
            label="修改人"
            prop="updated_by_name"
          />
          <el-table-column
            align="center"
            label="修改时间"
            prop="updated_at"
            width="150px"
          />
        </el-table>
      </div>
      <div
        slot="footer"
        class="dialog-footer-center"
      >
        <el-button @click="cancel">取 消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { seeBindWarehouse, warehouseList } from '@/utils/publicData'
export default {
  name: 'BindWarehouseDialog',
  data() {
    return {
      visible: false,
      name: '',
      id: '',
      tableLoading: false,
      warehouseListData: [], // 仓库列表
      unwarehouseListData: [], // 已绑定的仓库列表 - 前端列表
      loadingdialog: false,
      selectWarehouseIds: [] // 已绑定的仓库ids - 后台已经绑定的
    }
  },
  created() { },
  methods: {
    // 显示
    show(id) {
      const vm = this
      vm.id = id
      vm.visible = true
      vm.initWarehouseList(vm.id)
    },

    cancel() {
      const vm = this
      vm.name = ''
      vm.unwarehouseListData = []
      vm.warehouseListData = []
      vm.visible = false
    },

    // 提交
    submit() {
      const vm = this
      if (vm.unwarehouseListData.length <= 0) {
        vm.$message.error('请至少选择一个仓库')
      } else {
        const warehouse = vm.unwarehouseListData.map(arr => {
          return {
            warehouse_id: arr.parent_id,
            warehouse_fictitious_id: arr.id
          }
        })
        vm.$http
          .put(`/shop/bindWarehouse/${vm.id}`, { warehouse: warehouse })
          .then(res => {
            if (res.code === 10000) {
              vm.$message.success('绑定成功')
              this.visible = false
              this.$emit('submit')
              vm.handleCancelBindWarehouse()
            }
          })
      }
    },

    // 刷新
    refresh() {
      const vm = this
      vm.name = ''
      vm.query()
    },

    // 查询已绑定仓库
    initWarehouseList(id) {
      this.visible = true
      this.loadingdialog = true
      seeBindWarehouse(id, 'shops').then(tag => {
        this.selectWarehouseIds = tag.map(arr => {
          return arr.warehouse_fictitious_id
        })
        warehouseList().then(data => {
          const dataArr = data.filter((item) => {
            return item.company_id === 0
          })
          this.setWarehouseList(dataArr)
          this.changeWater()
          this.loadingdialog = false
        })
      })
    },

    // 查询 仓库
    query() {
      const vm = this
      vm.tableLoading = true
      warehouseList(vm.name).then(res => {
        // 去除客户仓库
        vm.warehouseListData = res.filter((item) => {
          return item.company_id === 0
        })
        vm.changeWater()
        vm.tableLoading = false
      })
    },

    // 设置 warehouseList
    setWarehouseList(data) {
      const vm = this
      data.forEach(element => {
        if (vm.selectWarehouseIds.includes(element.id)) {
          vm.unwarehouseListData.push(element)
        } else {
          vm.warehouseListData.push(element)
        }
      })
    },

    // 绑定
    handlebind(tag, type) {
      const data = this.warehouseListData.splice(
        this.warehouseListData.indexOf(tag),
        1
      )
      this.unwarehouseListData.push(data[0])
      this.changeWater()
    },

    // 移除人员
    handleDel(row, type) {
      const unIndex = this.unwarehouseListData.find(e => e.id === row.id)
      const [data] = this.unwarehouseListData.splice(
        unIndex,
        1
      )
      const index = this.warehouseListData.find(e => e.id === row.id)
      if (index === -1) {
        this.warehouseListData.push(data)
      }
      this.changeWater()
    },

    // 修改使选中仓库的上级仓库不可选择
    changeWater() {
      // 获取所有的已选中仓库上级仓库
      const dataArrParentId = this.unwarehouseListData.map(arr => {
        return arr.parent_id
      })
      // 修改未选中仓库是否可选
      this.warehouseListData = this.warehouseListData.map(arr => {
        if (dataArrParentId.includes(arr.parent_id)) {
          arr.isDisable = false
        } else {
          arr.isDisable = true
        }
        return arr
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  border: none;
}
</style>
